<template>
	<view>
		<canvas v-show="data.isshow" class="myCanvas" canvas-id="myCanvas" :style="{ width: data.canvasWidth, height: data.canvasHeight }"></canvas>
		<!-- 		<image v-show="!data.isshow" @longtap="saveImage()" :src="imgs" mode="" :style="{ width: data.canvasWidth, height: data.canvasHeight }"></image> -->
		<view class="btns flex_jc_cent" @click="saveImage">
			<view class="flex">
				<uni-icons type="arrow-down" size="20" color="#75613E"></uni-icons>
				<view class="">保存图片</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';
import { onLoad, onShow, onReachBottom, onPageScroll } from '@dcloudio/uni-app';
import { getUser } from '@/api/user.js';
const data = reactive({
	canvasWidth: 0,
	canvasHeight: 0,
	widths: 0,
	heights: 0,
	ratio: 0,
	headImg: '',
	rwmImg: '',
	imgs:'',
	isshow: true,
	userData: {}
});
const getUserInfo = () => {
	getUser().then((res) => {
		if (res.code == 200) {
			data.userData = res.data.user;
			downImgUrl();
		}
	});
};
onLoad(() => {
	getUserInfo();
	uni.getSystemInfo({
		success: (res) => {
			// res.screenWidth 设备宽度
			data.canvasWidth = 352 + 'px';
			data.widths = 352;
			data.ratio = 704 / 352;
			data.canvasHeight = (data.widths / 352) * 636 + 'px';
			data.heights = (data.widths / 352) * 636;
		}
	});
	uni.showLoading({
		title: '海报生成中...'
	});
});
const downImgUrl = () => {
	if (data.userData.img) {
		uni.getImageInfo({
			src: data.userData.img,
			success: function (res) {
				data.headImg = res.path;
				uni.getImageInfo({
					src: data.userData.img,
					success: function (res) {
						data.rwmImg = res.path;
						drawPageImg();
					}
				});
			}
		});
	} else {
		data.headImg = 'https://www.daolangtongge.com/read-book-api/profile/mini_app/img/head.png';
		data.rwmImg = 'https://www.daolangtongge.com/read-book-api/profile/mini_app/img/head.png';
		drawPageImg();
	}
};

const ctxText = (ctx, textFont, textAlign, textFillStyle, textName, x, y) => {
	ctx.beginPath();
	ctx.save(); //保存状态
	//字体样式大小
	(ctx.font = textFont),
		//文字对齐方式
		(ctx.textAlign = textAlign);
	//字体颜色
	ctx.fillStyle = textFillStyle;
	//填充字体  x轴 y轴
	ctx.fillText(textName, x, y);
};
// 绘制线条的简单封装（参数：起点、终点、颜色、宽度）
const drawLine = (ctx, startX = 50, startY = 50, endX = 250, endY = 50, color = '#D8C6A7', width = 1) => {
	if (!ctx) return; // 确保上下文存在
	ctx.beginPath(); // 开始路径
	ctx.moveTo(startX, startY); // 起点
	ctx.lineTo(endX, endY); // 终点
	ctx.strokeStyle = color; // 线条颜色
	ctx.lineWidth = width; // 线条宽度
	ctx.stroke(); // 绘制
	ctx.closePath(); // 关闭路径
};
const ctxCircular = (ctx, img, x, y, width, height, r, shadow) => {
	ctx.beginPath(); //开始绘制
	ctx.save(); //保存(canvas)状态
	ctx.moveTo(x + r, y);
	ctx.lineTo(x + width - r, y);
	ctx.arc(x + width - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
	ctx.lineTo(x + width, y + height - r);
	ctx.arc(x + width - r, y + height - r, r, 0, Math.PI * 0.5);
	ctx.lineTo(x + r, y + height);
	ctx.arc(x + r, y + height - r, r, Math.PI * 0.5, Math.PI);
	ctx.lineTo(x, y + r);
	ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
	if (shadow == 1) {
		ctx.shadowBlur = 20; // 阴影模糊程度
		ctx.shadowColor = '#fff'; // 阴影颜色
	}
	ctx.fill(); //对当前路径中的内容进行填充
	ctx.clip(); //从原始画布中剪切任意形状和尺寸
	ctx.closePath(); //关闭一个路径
	ctx.drawImage(img, x, y, width, height);
	ctx.restore(); //恢复(canvas)状态
};
const ctxTextWrap = (ctx, text, x, y, w) => {
	//自动换行介绍
	var temp = '';
	var row = [];
	let gxqm = '';
	if (text) {
		gxqm = text;
	} else {
		gxqm = '嘘…这位稻友正在闭关修炼，简介栏暂时隐形了';
	}
	let gexingqianming = gxqm.split('');
	for (var a = 0; a < gexingqianming.length; a++) {
		if (ctx.measureText(temp).width < w) {
		} else {
			row.push(temp);
			temp = '';
		}
		temp += gexingqianming[a];
	}
	row.push(temp);
	ctx.font = '10px arail';
	ctx.textAlign = 'left';
	ctx.fillStyle = '#75613E';
	for (var b = 0; b < row.length; b++) {
		ctx.fillText(row[b], x, y + (b + 1) * 15);
	}
};
const drawPageImg = () => {
	const ctx = uni.createCanvasContext('myCanvas');
	ctx.drawImage(
		'/static/rwmbcg.png', //图像资源
		0 / data.ratio, //图像的左上角在目标canvas上 X 轴的位置
		0 / data.ratio, //图像的左上角在目标canvas上 Y 轴的位置
		704 / data.ratio, //在目标画布上绘制图像的宽度
		1272 / data.ratio //在目标画布上绘制图像的高度
	);
	ctx.drawImage(
		'/static/login2.png', //图像资源
		284 / data.ratio, //图像的左上角在目标canvas上 X 轴的位置
		74 / data.ratio, //图像的左上角在目标canvas上 Y 轴的位置
		174 / data.ratio, //在目标画布上绘制图像的宽度
		52 / data.ratio //在目标画布上绘制图像的高度
	);
	ctx.drawImage(
		'/static/rwm1.png', //图像资源
		130 / data.ratio, //图像的左上角在目标canvas上 X 轴的位置
		144 / data.ratio, //图像的左上角在目标canvas上 Y 轴的位置
		442 / data.ratio, //在目标画布上绘制图像的宽度
		52 / data.ratio //在目标画布上绘制图像的高度
	);
	// 欢迎成为第「 60 」位稻友， 这片精神原野等你耕耘。 思想碰撞的喜悦即将开启， 期待与您并肩同行， 在书页与生活的交响中， 同歌共舞。
	ctxText(ctx, 'normal 16px Arial,PingFang SC', 'left', '#75613E', `欢迎成为第「 `, 130 / data.ratio, 275 / data.ratio);
	ctxText(ctx, 'normal bold 24px Arial,PingFang SC', 'center', '#75613E', data.userData.vipRank, 370 / data.ratio, 275 / data.ratio);
	ctxText(ctx, 'normal 16px Arial,PingFang SC', 'left', '#75613E', ` 」位稻友，`, 400 / data.ratio, 275 / data.ratio);
	// 1、x轴位置 2、Y轴位置 3、宽度 4、Y轴位置
	drawLine(ctx, 130 / data.ratio, 300 / data.ratio, 560 / data.ratio, 300 / data.ratio);
	ctxText(ctx, 'normal 16px Arial,PingFang SC', 'left', '#75613E', `这片精神原野等你耕耘。`, 130 / data.ratio, 355 / data.ratio);

	drawLine(ctx, 130 / data.ratio, 380 / data.ratio, 560 / data.ratio, 380 / data.ratio);
	ctxText(ctx, 'normal 16px Arial,PingFang SC', 'left', '#75613E', `思想碰撞的喜悦即将开启，`, 130 / data.ratio, 435 / data.ratio);

	drawLine(ctx, 130 / data.ratio, 460 / data.ratio, 560 / data.ratio, 460 / data.ratio);
	ctxText(ctx, 'normal 16px Arial,PingFang SC', 'left', '#75613E', `期待与您并肩同行，`, 130 / data.ratio, 515 / data.ratio);

	drawLine(ctx, 130 / data.ratio, 540 / data.ratio, 560 / data.ratio, 540 / data.ratio);
	ctxText(ctx, 'normal 16px Arial,PingFang SC', 'left', '#75613E', `在书页与生活的交响中，`, 130 / data.ratio, 595 / data.ratio);

	drawLine(ctx, 130 / data.ratio, 620 / data.ratio, 560 / data.ratio, 620 / data.ratio);
	ctxText(ctx, 'normal 16px Arial,PingFang SC', 'left', '#75613E', `同歌共舞。`, 130 / data.ratio, 675 / data.ratio);
	drawLine(ctx, 130 / data.ratio, 700 / data.ratio, 560 / data.ratio, 700 / data.ratio);

	ctx.drawImage(
		data.headImg, //图像资源
		230 / data.ratio, //图像的左上角在目标canvas上 X 轴的位置
		748 / data.ratio, //图像的左上角在目标canvas上 Y 轴的位置
		244 / data.ratio, //在目标画布上绘制图像的宽度
		244 / data.ratio //在目标画布上绘制图像的高度
	);
	drawLine(ctx, 82 / data.ratio, 1040 / data.ratio, 620 / data.ratio, 1040 / data.ratio);
	ctxCircular(ctx, data.headImg, 82 / data.ratio, 1060 / data.ratio, 40 / data.ratio, 40 / data.ratio, 20 / data.ratio, 1);
	ctxText(ctx, 'normal 14px Arial,PingFang SC', 'left', '#75613E', `${data.userData.name}`, 135 / data.ratio, 1090 / data.ratio);
	ctxTextWrap(ctx, data.userData.info, 82 / data.ratio, 1100 / data.ratio, 750 / data.ratio);
	ctx.draw(
		false,
		(() => {
			setTimeout(() => {
				uni.canvasToTempFilePath({
					canvasId: 'myCanvas',
					destWidth: data.canvasWidth * 2, //展示图片尺寸=画布尺寸1*像素比2
					destHeight: data.canvasHeight * 2,
					quality: 1,
					fileType: 'png',
					success: (res) => {
						uni.hideLoading();
						console.log('通过画布绘制出的图片--保存的就是这个图', res.tempFilePath);
						data.imgs = res.tempFilePath
					},
					fail: function (error) {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '绘制图片失败' // res.tempFilePath
						});
					}
				});
			}, 100);
		})()
	);
};

const saveImage = async () => {
	try {
		// 1. 先校验图片路径是否存在（避免无效调用）
		if (!data?.imgs) {
			uni.showToast({ icon: 'none', title: '图片路径无效', position: 'bottom' });
			return;
		}
		// 2. 提前获取相册授权状态（关键：避免直接保存触发默认弹窗）
		const authRes = await uni.getSetting({});
		const hasAlbumAuth = authRes.authSetting['scope.writePhotosAlbum'];
		// 3. 处理授权状态
		if (hasAlbumAuth === false) {
			// 3.1 已拒绝过授权：引导去设置页开启
			const modalRes = await uni.showModal({
				title: '需要相册授权',
				content: '保存图片需开启"相册写入"权限，是否去设置？',
				cancelText: '取消',
				cancelColor: '#999',
				confirmText: '去设置',
				confirmColor: '#75613E'
			});
			if (modalRes.confirm) {
				uni.openSetting({}); // 跳转小程序设置页
			}
			return;
		}
		// 4. 授权通过/未询问过：执行保存
		await uni.saveImageToPhotosAlbum({ filePath: data.imgs });
		uni.showToast({ icon: 'none', title: '已保存到系统相册', position: 'bottom' });
	} catch (error) {
		// 5. 统一捕获所有错误（如路径错误、保存失败等）
		console.error('保存图片失败：', error);
		uni.showToast({ icon: 'none', title: '保存失败，请稍后重试', position: 'bottom' });
	}
};
</script>

<style lang="scss">
page {
	background: #ece6d5;
}
.myCanvas {
	margin: 20rpx auto;
}
.btns {
	width: 196rpx;
	height: 60rpx;
	background: #d8c6a7;
	border-radius: 40rpx 40rpx 40rpx 40rpx;
	margin: 50rpx auto;
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 28rpx;
	color: #75613e;
}
</style>
